<template>
  <div>
    <form action>
      <van-image
        width="4rem"
        height="4rem"
        src="https://ftp.bmp.ovh/imgs/2021/06/3a0bdfba0a66b12e.jpg"
      />
      <h2>欢迎来到登录页面</h2>
      <p>
        <input ref="inputUserName" type="text" placeholder="请输入用户名" />
      </p>
      <p>
        <input ref="inputPwd" type="password" placeholder="请输入密码" />
      </p>
      <button @click.prevent="login">登录</button>
      <button @click.prevent="reg">注册</button>
    </form>
  </div>
</template>
<script>
import axios from "axios";
export default {
  props: [],
  data() {
    return {};
  },
  computed: {},
  methods: {
    // 登录
    login() {
      axios
        .post(
          "/apia/login.php",
          `username=${this.$refs.inputUserName.value}&password=${this.$refs.inputPwd.value}`
        )
        .then(res => {
          console.log(res);
          if (res.data == null) {
            this.$toast.fail("用户名或密码错误");
          } else {
            this.$toast.success("登录成功");
            var obj = {
              login: 1,
              username: res.data.username
            };
            window.sessionStorage.setItem('loginData', obj.username);
            this.$store.commit("loginName", obj);
            this.$router.push("/home");
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //跳转注册页面
    reg() {
      this.$router.push("/reg");
    }
  },
  components: {},
  filters: {},
  watch: {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {}
};
</script>
<style scoped>
form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5rem 2rem 0 2rem;
}
p {
  width: 100%;
  margin: 5px 0;
  padding: 10px 2px;
  border-bottom: 1px solid rgb(247, 205, 212);
}
p:first-of-type {
  margin-top: 40px;
}
p input {
  width: 100%;
  border: none;
}
button {
  width: 100%;
  height: 40px;
  margin-top: 20px;
  border: none;
  border-radius: 3px;
  background-color: #ff8646;
  color: white;
}
</style>